<template>
  <view class="wh_750 pageHeight flex flex-column align-center bg_F5F5F5">
    <s-header-title title="合并家谱" is-display-back background="#FFFFFF" is-fixed
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height: `${state.pageHeight}px`}"></view>
    <view class="hW_20"></view>
    <gapbar title="当前大家谱" :showRight="false">
      <template v-slot:content>
        <view class="content">
          {{ state.genealogicalInformation.title }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="当前大家谱成员" @elementClick="applyForFamilyTreeMembership">
      <template v-slot:content>
        <view class="content">
          {{ state.form.applyForFamilyTreeMembership.surname }}{{ state.form.applyForFamilyTreeMembership.name }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="目标小家谱" @elementClick="targetFamilyTree">
      <template v-slot:content>
        <view class="content">
          {{ state.form.genealogicalName.title }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="目标小家谱成员（此人及此人晚辈）" @elementClick="targetFamilyTreeMember">
      <template v-slot:content>
        <view class="content">
          {{ state.form.targetFamilyTreeMember.surname }}{{ state.form.targetFamilyTreeMember.name }}
        </view>
      </template>
    </gapbar>
    <view class="hW_50"></view>
    <view class="wh_556 hW_80 fs_32 fw_500 color_FFFFFF bg_FF4206 flex align-center justify-center"
          style="border-radius: 40rpx"
          @click.stop="confirmMerge"
    >
      确定
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import Gapbar from '@/pages/genealogy/components/gapbar.vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  const state = reactive({
    options: {},
    pageHeight: 0,
    form: {
      // 申请家谱
      genealogicalName: {},
      // 申请家谱成员
      applyForFamilyTreeMembership: {},
      // 绑定的关系
      boundRelationship: '',
      // 目标家谱成员
      targetFamilyTreeMember: '',
      // 家谱信息
      genealogicalInformation:{}
    },
  });

  onLoad((options) => {
    state.options = options;
    getGenealogicalInformation()
  });

  async function getGenealogicalInformation() {
    let { data } = await sheep.$api.genealogy.getGenealogyInfo({
      genealogy_id: state.options.genealogy_id,
    });
    state.genealogicalInformation = data;
  }

  function getPageHeight(height) {
    state.pageHeight = height;
  }

  function applyForFamilyTreeMembership() {
    uni.$once('selectMember', (item) => {
      console.log(item);
      state.form.applyForFamilyTreeMembership = item;
    });
    sheep.$router.go('/pages/genealogy/applyForFamilyTreeMembership', { id: state.options.id });
  }

  function targetFamilyTree() {
    uni.$once('selectGenealogy', (item) => {
      console.log(item);
      state.form.genealogicalName = item;
    });
    sheep.$router.go('/pages/genealogy/targetFamilyTree', { id: state.options.id });
  }

  function targetFamilyTreeMember() {
    if (!state.form.genealogicalName.id) {
      sheep.$helper.toast('请先选择目标家谱');
      return;
    }
    uni.$once('selectMember', (item) => {
      console.log(item);
      state.form.targetFamilyTreeMember = item;
    });
    sheep.$router.go('/pages/genealogy/applyForFamilyTreeMembership', { id: state.form.genealogicalName.code });
  }

  async function confirmMerge() {
    if (!state.form.applyForFamilyTreeMembership.id) {
      sheep.$helper.toast('请先选择申请家谱成员');
      return;
    }
    if (!state.form.genealogicalName.id) {
      sheep.$helper.toast('请先选择目标家谱');
      return;
    }
    if (!state.form.targetFamilyTreeMember.id) {
      sheep.$helper.toast('请先选择目标家谱成员');
      return;
    }
    uni.showLoading({
      title: '合并中...',
      mask: true,
    });
    const { code, msg } = await sheep.$api.genealogy.applyMergeGenealogy({
      apply_code: state.options.id,
      target_code: state.form.genealogicalName.code,
      apply_relation_id: state.form.applyForFamilyTreeMembership.id,
      target_relation_id: state.form.targetFamilyTreeMember.id,
    });
    if (code == 1) {
      uni.hideLoading();
      sheep.$helper.toast('合并成功');
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      uni.hideLoading();
      sheep.$helper.toast(msg);
    }
  }
</script>


<style scoped lang="scss">
  .content {
    font-size: 28rpx;
    color: #4B4B4B;
    font-weight: 500;
  }
</style>
